<template>
  <view class="container">
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" :title="titleHeader " :background="background">
    </u-navbar>
    <view class="container_search">
      <u-search placeholder="请输入题库名称" shape="square" v-model="searchPaperItem"></u-search>
    </view>
    <view v-if="tag ===1 && personPaperList.length!==0 ">
      <view style="position: relative;z-index: 1;padding: 20rpx 6rpx;" v-for=" item in personPaperList">
        <view class="my-paper" @click="practiceHandle(item)">
          <view class="u-today-card-img">
            <u-image width="70rpx" height="80rpx" src="../../static/images/paperItem.png"></u-image>
          </view>
          <view class="u-today-card-body">
            <view>
              {{item.name}}
            </view>
            <view class="u-today-card">
              <view class="u-today-card-count">
                题目数：{{item.questionCount}}
              </view>
              <view class="u-today-card-count">
                上传时间：{{item.createTime}}
              </view>
            </view>
          </view>
          <view class="u-today-card-icon"  v-on:click.stop="editPaperItem(item)">
            <u-icon name="more-dot-fill" size="35"></u-icon>
          </view>
        </view>
      
        <br />
        <u-line color="#EBEAEA" />
      </view>
    </view>
    <view class="container_card" v-if="tag ===1 && personPaperList.length===0 ">
      <u-empty text="列表为空" mode="list " icon-size="300rpx"></u-empty>
    </view>

    <u-popup v-model="showPaperItem" mode="bottom" height="600rpx" border-radius="20">
      <view style="position: relative;z-index: 1;padding: 20rpx 6rpx;" v-for=" item in personPaperList">
        <view class="container_card">
          <view class="u-today" @click="practiceHandle(item)">
            <view class="u-today-card">
              试题名称：{{item.name}}
            </view>
          </view>
          <view class="u-today-header">
            <view class="u-today-text">
              题目数：{{item.questionCount}}
            </view>
            <view class="u-today-text">
              上传时间：{{item.createTime}}
            </view>
          </view>
        </view>
      </view>
      <u-cell-group>
        <u-cell-item icon="setting-fill" title="置顶题库" @click="pinToTop"></u-cell-item>
      </u-cell-group>
    </u-popup>
    <u-toast ref="uToast" />
  </view>


  </view>
</template>

<script>
  import {
    getPublicPaperAPI,
    getPublicPaperListAPI
  } from '@/api/addPaper/addpaper.js'
  export default {
    data() {
      return {
        categoryId:'',
        titleHeader:'',
        tag: 0,
        showPaperItem: false,
        searchPaperItem: '',
        personPaperList: [],
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
      };
    },
    created() {
      this.getPersonPaperList()
    },
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
      if (option.paperType === 'person') {
        this.paperType = 'person'
        this.personId = option.id
        this.aiQuestion = false
      } else if (option.paperType === 'public') {

        this.paperType = 'public'
        this.categoryId = option.categoryId
        this.aiQuestion = true
        if(option.categoryId === '1'){
          this.titleHeader = '竞赛学习'
        }else if(option.categoryId === '2'){
          this.titleHeader = '专题学习'
        }else if(option.categoryId === '3'){
          this.titleHeader = '思想学习'
        }else if(option.categoryId === '4'){
          this.titleHeader = '专业学习'
        }else if(option.categoryId === '5'){
          this.titleHeader = '安规学习'
        }else if(option.categoryId === '6'){
          this.titleHeader = '其他学习'
        }
      }
    },
    methods: {
      // 置顶
      pinToTop() {
        this.$refs.uToast.show({
          title: '置顶成功',
          type: 'success',
        })
        this.showPaperItem = false
      },
      //点击公共刷题
      practiceHandle(item) {
        uni.navigateTo({
          url: '../shuatiPaper/shuatiPaper?paperType=public&categoryId=' + item.categoryId+'&id='+ item.id,
        })

      },
      editPaperItem(item) {
        this.showPaperItem = true
        this.paperItemDetails = item
      },
      async getPersonPaperList() { 
        const params ={
          pageNo:1,
          pageSize:10,
          categoryId:this.categoryId
        }
        await getPublicPaperListAPI(params).then((res) => {
          this.personPaperList = res.data.list
          this.personPaperList.map((oo)=>{
           return oo.categoryId=this.categoryId
          })
          this.tag = 1
        })
      },
    }
  }
</script>

<style lang="scss">
  .container {
    height: 100vh;

    .container_search {
      padding: 20rpx;
      background-color: #fff;
    }


  .my-paper {
    display: flex;
    justify-content: flex-start;
    padding: 0 25rpx;
    color: #333;

    .u-today-card-img {
      width: 80rpx;
      margin-right: 20rpx;
    }

    .u-today-card-body {
      flex: 1;
    }

    .u-today-card {
      display: flex;
      justify-content: space-between;

      .u-today-card-count {
        margin-top: 10rpx;
        font-size: 20rpx;
        color: #9F9F9F;
      }
    }

    .u-today-card-icon {
      width: 40rpx;
      height: 50rpx;
    }
  }

    .container_card {
      margin: 20rpx;
      // background-color: #F2F2F2;
      padding: 20rpx;
      border-radius: 20rpx;
      box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);

      .u-today {
        display: flex;
        justify-content: space-between;
        color: #333;
      }

      .u-card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin-bottom: 20rpx;
        padding: 10rpx 25rpx;
      }

      .u-today-header {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        color: #9F9F9F;
      }
    }


  }
</style>